/**
 * @file index.scss
 * @description 全局样式入口文件。
 *              严格遵守 Sass 规范，将所有 @use 和 @forward 置于文件顶部。
 */

// 1. Sass 模块加载与转发
// ---------------------------------
// @use 规则必须位于最前面
@use 'sass:map';
@use './variables' as *;
@use './base';
@use './themes/default';
@use './themes/light';
@use './themes/dark';
@use './themes/cyberpunk';
@use './themes/ocean';
@use './themes/neon';
@use './themes/high-contrast';
@use './themes/rainbow-cyber';

// @forward 规则用于将模块暴露给下游
@forward './variables';

// 统一导入所有组件样式
@use './components/index' as components;


// 2. 外部字体 (原生 CSS @import)
// ---------------------------------
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

// 3. 简单的现代化 Reset
// ---------------------------------
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 4. 应用根元素与 Body 样式
// ---------------------------------
#app {
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--bg-color);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
  transition: background-color 0.5s ease, color 0.3s ease;
  line-height: 1.6;
  overflow-x: hidden !important;
}

/* 移除 Element Plus Menu 组件的默认右边框，以便我们自定义 */
.el-menu {
  border-right: none !important;
}

// 6. Element Plus 组件样式覆盖
// ---------------------------------
// 确保 Element Plus 组件能正确响应我们的主题系统

// Select 下拉选择器
.el-select-dropdown,
.el-select__popper,
.el-popper.is-pure {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--box-shadow-base) !important;
  
  .el-select-dropdown__item {
    color: var(--text-color) !important;
    background-color: transparent !important;
    
    &:hover {
      background-color: var(--primary-color-light) !important;
      color: var(--text-color) !important;
    }
    
    &.selected {
      color: var(--primary-color) !important;
      background-color: var(--primary-color-light) !important;
    }
    
    &.is-disabled {
      color: var(--text-color-light) !important;
    }
  }
}

// 特别针对主题切换器的下拉样式
.theme-switch .el-select-dropdown,
.theme-switch .el-select__popper {
  background-color: var(--bg-color-secondary) !important;
  border-color: var(--border-color) !important;
  
  .el-select-dropdown__item {
    color: var(--text-color) !important;
    
    &:hover {
      background-color: var(--primary-color-light) !important;
    }
  }
}

// Select 输入框
.el-select .el-input {
  .el-input__inner {
    background-color: var(--bg-color-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    
    &:focus {
      border-color: var(--primary-color) !important;
    }
  }
  
  .el-input__suffix {
    color: var(--text-color) !important;
  }
}

// Date Picker 日期选择器和日期范围选择器 - 增强美化版本
.el-picker-panel,
.el-date-picker,
.el-date-range-picker,
.el-picker__popper {
  background-color: var(--bg-color-secondary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--box-shadow-base) !important;
  backdrop-filter: blur(var(--backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--backdrop-blur)) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  
  .el-picker-panel__body {
    color: var(--text-color) !important;
    background-color: transparent !important;
  }
  
  // 日期表格美化
  .el-date-table {
    th {
      color: var(--text-color-secondary) !important;
      background-color: var(--bg-color-tertiary) !important;
      border-bottom: 1px solid var(--border-color) !important;
      font-weight: 600 !important;
      padding: 12px 8px !important;
      font-size: 12px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
    }
    
    td {
      color: var(--text-color) !important;
      border: none !important;
      transition: all 0.2s ease !important;
      position: relative !important;
      
      &.available {
        &:hover {
          background-color: var(--primary-color-light) !important;
          color: var(--primary-color) !important;
          transform: scale(1.05) !important;
          border-radius: 8px !important;
        }
      }
      
      &.current:not(.disabled) {
        background-color: var(--primary-color) !important;
        color: var(--bg-color) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3) !important;
      }
      
      &.in-range {
        background-color: var(--primary-color-light) !important;
        color: var(--text-color) !important;
        position: relative !important;
        
        &::before {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          left: 0 !important;
          right: 0 !important;
          height: 2px !important;
          background: linear-gradient(90deg, var(--primary-color), transparent) !important;
          transform: translateY(-50%) !important;
        }
      }
      
      &.start-date,
      &.end-date {
        background-color: var(--primary-color) !important;
        color: var(--bg-color) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.4) !important;
      }
      
      &.disabled {
        color: var(--text-color-disabled) !important;
        background-color: transparent !important;
        opacity: 0.5 !important;
      }
      
      &.prev-month,
      &.next-month {
        color: var(--text-color-light) !important;
        opacity: 0.6 !important;
      }
      
      // 今天标记
      &.today {
        .el-date-table-cell__text {
          color: var(--primary-color) !important;
          font-weight: 600 !important;
        }
        
        &::after {
          content: '' !important;
          position: absolute !important;
          bottom: 4px !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 4px !important;
          height: 4px !important;
          background-color: var(--primary-color) !important;
          border-radius: 50% !important;
        }
      }
    }
  }
  
  .el-date-range-picker__content.is-left {
    border-right: 1px solid var(--border-color) !important;
  }
  
  .el-picker-panel__footer {
    background-color: var(--bg-color-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
    
    .el-button {
      background-color: transparent !important;
      color: var(--text-color) !important;
      border: 1px solid var(--border-color) !important;
      
      &:hover {
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
      }
    }
    
    .el-button--primary {
      background-color: var(--primary-color) !important;
      color: var(--primary-text-color) !important;
      border-color: var(--primary-color) !important;
    }
  }
  
  .el-picker-panel__icon-btn {
    color: var(--text-color-secondary) !important;
    
    &:hover {
      color: var(--primary-color) !important;
    }
  }
  
  .el-date-picker__header-label,
  .el-date-range-picker__header {
    color: var(--text-color) !important;
    font-weight: 600 !important;
  }
}

// Time Picker 时间选择器
.el-time-panel {
  background-color: var(--bg-color-secondary) !important;
  border: 1px solid var(--border-color) !important;
  
  .el-time-spinner__item {
    color: var(--text-color-secondary) !important;
    
    &:hover:not(.disabled) {
      background-color: var(--primary-color-light) !important;
      color: var(--primary-color) !important;
    }
    
    &.active:not(.disabled) {
      color: var(--primary-color) !important;
      font-weight: 600 !important;
    }
  }
  
  .el-time-panel__footer {
    border-top: 1px solid var(--border-color) !important;
  }
}

// 日期范围选择器的输入框
.el-range-editor {
  background-color: var(--bg-color-secondary) !important;
  border: 1px solid var(--border-color) !important;
  
  &.is-active {
    border-color: var(--primary-color) !important;
  }
  
  .el-range-input {
    background-color: transparent !important;
    color: var(--text-color) !important;
    
    &::placeholder {
      color: var(--text-color-light) !important;
    }
  }
  
  .el-range-separator {
    color: var(--text-color) !important;
  }
}

// 弹出层容器的通用样式
.el-popper,
.el-dropdown-menu,
.el-tooltip__popper,
.el-popover,
div[data-popper-placement] {
  background-color: var(--bg-color-secondary) !important; // 新增此行，统一弹出层背景
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--box-shadow-base) !important;
  backdrop-filter: blur(var(--backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--backdrop-blur)) !important;
  color: var(--text-color) !important;
  
  // 确保所有子元素也应用主题
  * {
    color: inherit !important;
  }
  
  // 箭头样式
  &[data-popper-placement^="top"] .el-popper__arrow::before,
  &[data-popper-placement^="bottom"] .el-popper__arrow::before,
  &[data-popper-placement^="left"] .el-popper__arrow::before,
  &[data-popper-placement^="right"] .el-popper__arrow::before {
    border-color: var(--border-color) !important;
    background-color: var(--bg-color-secondary) !important;
  }
}

// 最高优先级的下拉框样式覆盖
[role="listbox"],
[class*="el-select-dropdown"],
[class*="el-popper"]:has(.el-select-dropdown__item) {
  background-color: var(--bg-color-secondary) !important;
  border-color: var(--border-color) !important;
  
  [class*="el-select-dropdown__item"] {
    background-color: transparent !important;
    color: var(--text-color) !important;
    
    &:hover {
      background-color: var(--primary-color-light) !important;
    }
  }
}

// Element Plus Message 组件主题化
.el-message {
  background-color: var(--bg-color-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-base) !important;
  box-shadow: var(--box-shadow-base) !important;
  color: var(--text-color) !important;

  // 根据类型设置左边框颜色
  &.el-message--success {
    border-left: 4px solid var(--success-color) !important;
    .el-message__icon {
      color: var(--success-color) !important;
    }
  }

  &.el-message--warning {
    border-left: 4px solid var(--warning-color) !important;
    .el-message__icon {
      color: var(--warning-color) !important;
    }
  }

  &.el-message--error {
    border-left: 4px solid var(--danger-color) !important;
    .el-message__icon {
      color: var(--danger-color) !important;
    }
  }

  &.el-message--info {
    border-left: 4px solid var(--primary-color) !important;
    .el-message__icon {
      color: var(--primary-color) !important;
    }
  }

  .el-message__closeBtn {
    color: var(--text-color-light) !important;
    
    &:hover {
      color: var(--danger-color) !important;
    }
  }
}

// Element Plus 禁用状态通用样式
.el-input.is-disabled,
.el-textarea.is-disabled,
.el-select.is-disabled,
.el-date-editor.is-disabled,
.el-input-number.is-disabled {
  .el-input__wrapper,
  .el-input__inner,
  .el-textarea__inner {
    background-color: var(--disabled-bg-color) !important;
    border-color: var(--disabled-border-color) !important;
    color: var(--disabled-text-color) !important;
    cursor: not-allowed !important;
  }
  
  .el-input__suffix,
  .el-input__prefix,
  .el-select__caret {
    color: var(--disabled-text-color) !important;
  }
}

// Element Plus 下拉菜单 z-index 修复
.el-select-dropdown,
.el-cascader-panel {
  z-index: 9999 !important;
}

// 7. 全局样式重置（重复的@use语句已移除）
// ---------------------------------
// 注意：所有@use语句已在文件开头声明，此处不再重复

// 额外的全局样式重置（补充）
#app {
  width: 100%;
  height: 100%;
}

// Element Plus 样式覆盖，防止影响自定义组件
.c-mobile-list,
.c-advanced-filter,
.component-example-view {
  // 强制重置 Element Plus 的字体大小影响
  .c-text {
    font-size: inherit !important;
    
    &[size="small"] {
      font-size: 12px !important;
    }
    
    &[size="medium"] {
      font-size: 14px !important;
    }
    
    &[size="large"] {
      font-size: 16px !important;
    }
  }
  
  // 重置Element Plus对按钮的影响
  .c-button {
    font-size: inherit !important;
    
    &.c-button--small {
      font-size: 12px !important;
      padding: 4px 8px !important;
    }
  }
  
  // 重置Element Plus对标签的影响
  .c-tag {
    font-size: 12px !important;
    
    &.c-tag--small {
      font-size: 11px !important;
    }
  }
}

// 移动端特殊优化
@media (max-width: 768px) {
  .c-mobile-list .item-fields .field-item .c-text {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}